<template>
  <div class="studentInfo">
    <div class="left-box">
      <div class="user-top">
        <div>{{ userInfo.course }}</div>
        <div class="user-contact">{{ userInfo.courseSection }}</div>
        <div>
          <el-button type="text" icon="el-icon-edit" @click="showUserEdit(courseId)">编辑</el-button>
        </div>
      </div>
      <div class="user-content">
        <div class="user-content-item">
          <span>时间：</span>
          <span>{{ userInfo.time }}</span>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="title-box">
        <el-button type="primary" @click="addStudent">添加学员</el-button>
        <div>
          <span>签到状态</span>
          <el-select v-model="signInStatus" placeholder="请选择课程" style="width:200px">
            <el-option
              v-for="item in signInStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <el-table
        :data="courseTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        style="width: 100%;"
      >
        <el-table-column prop="student" label="学员" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="courseTime" label="可用课时" align="center" />
        <el-table-column prop="courseValidity" label="课程有效期" align="center" />
        <el-table-column prop="deductTime" label="扣除课时" align="center" />
        <el-table-column prop="signInStatus" label="签到状态" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin:20px 0;">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          :total="courseTableData.length"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog :visible.sync="addStudentDialog" title="选择学员" width="900px">
      <div style="margin-bottom:10px;">
        <el-input v-model="searchKeyWord" style="width:200px;" />
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="newourseTable"
        :row-key="getRowKeys"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column prop="student" label="学员" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="client" label="所属客户" align="center" />
        <el-table-column prop="faceCourse" label="面授课程" align="center" />
        <el-table-column prop="courseTime" label="可用课时" align="center" />
        <el-table-column prop="courseValidity" label="课程有效期" align="center" />
        <el-table-column prop="signInStatus" label="签到状态" align="center" />
      </el-table>
      <!-- 分页 -->
      <div style="margin:20px 0;">
        <el-pagination
          :page-size="innerpagesize"
          :total="courseTable.length"
          background
          layout="prev, pager, next"
          @current-change="innerCurrentChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudentDialog = false">取 消</el-button>
        <el-button type="primary" @click="addStudentDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      signInStatus: '',
      // 默认显示用户信息数据
      userInfo: {
        course: '语文作文',
        courseSection: '第一节',
        time: '2019-06-03 14:00-17:00'
      },
      signInStatusOptions: [
        {
          value: '待签到',
          label: '待签到'
        },
        {
          value: '已签到',
          label: '已签到'
        },
        {
          value: '请假',
          label: '请假'
        },
        {
          value: '未到',
          label: '未到'
        }
      ],
      courseTableData: [
        {
          student: '刘德华',
          phone: '13812315231',
          courseTime: '16',
          courseValidity: '2019-09-06',
          deductTime: '2',
          signInStatus: '已签到'
        }
      ],
      currentPage: 1,
      pageSize: 5,
      addStudentDialog: false,
      courseTable: [
        {
          id: '1',
          student: '刘德华',
          phone: '13812315231',
          client: '刘华',
          faceCourse: '语文作文',
          courseTime: '16',
          courseValidity: '2019-09-06',
          signInStatus: '已签到'
        },
        {
          id: '2',
          student: '刘德华',
          phone: '13812315231',
          client: '刘华',
          faceCourse: '语文作文',
          courseTime: '16',
          courseValidity: '2019-09-06',
          signInStatus: '已签到'
        },
        {
          id: '3',
          student: '刘德华',
          phone: '13812315231',
          client: '刘华',
          faceCourse: '语文作文',
          courseTime: '16',
          courseValidity: '2019-09-06',
          signInStatus: '已签到'
        },
        {
          id: '4',
          student: '刘德华',
          phone: '13812315231',
          client: '刘华',
          faceCourse: '语文作文',
          courseTime: '16',
          courseValidity: '2019-09-06',
          signInStatus: '已签到'
        },
        {
          id: '5',
          student: '刘德华',
          phone: '13812315231',
          client: '刘华',
          faceCourse: '语文作文',
          courseTime: '16',
          courseValidity: '2019-09-06',
          signInStatus: '已签到'
        },
      ],
      searchKeyWord: '',
      innercurrent: 1,
      innerpagesize: 4,
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      idKey: 'id'
    }
  },
  computed: {
    // courseDialogVisible() { return this.data.dialog },
    newourseTable() {
      return this.courseTable.slice((this.innercurrent - 1) * this.innerpagesize, this.innercurrent * this.innerpagesize)
    }
  },
  mounted() {
    // this.courseId = this.$route.params.studentNum
  },
  methods: {
    // 获取row的key值
    getRowKeys(row) {
      return row.id
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    showUserEdit(id) {
      this.$router.push({ name: 'Createcourse' })
    },
    addStudent() {
      this.addStudentDialog = true
    },

    // 设置选中的方法
    setSelectRow() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return
      }
      // 标识当前行的唯一键的名称
      const idKey = this.idKey
      const selectAllIds = []
      const that = this
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey])
      })
      this.$refs.multipleTable.clearSelection()
      for (var i = 0; i < this.newourseTable.length; i++) {
        if (selectAllIds.indexOf(this.newourseTable[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.multipleTable.toggleRowSelection(this.newourseTable[i], true)
        }
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      const idKey = this.idKey
      const that = this
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection
        return
      }
      // 总选择里面的key集合
      const selectAllIds = []
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey])
      })
      const selectIds = []
      // 获取当前页选中的id
      this.multipleSelection.forEach(row => {
        selectIds.push(row[idKey])
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row)
        }
      })
      const noSelectIds = []
      // 得到当前页没有选中的id
      this.newourseTable.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey])
        }
      })
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
              // 如果总选择中有未被选中的，那么就删除这条
              that.multipleSelectionAll.splice(i, 1)
              break
            }
          }
        }
      })
    },
    innerCurrentChange(val) {
      // 改变页的时候调用一次
      this.changePageCoreRecordData()
      this.innercurrent = val
      // this.query()
      this.setSelectRow()
    },
    handleSelectionChange(val) {
      // table组件选中事件,记得加上@selection-change="handleSelectionChange"
      this.multipleSelection = val
    },
    // query() {
    // 分页查询数据方法，在成功返回数据方法里调用setSelectRow方法，使每次分页查询都能勾选中
    //   this.$http.get({        ...,
    //     success: (res) => {
    //                     ......
    //     setTimeout(() => {
    //   this.setSelectRow()
    //     }, 200)
    //   }
    //   })
    // },
    // 得到选中的所有数据
    getAllSelectionData() {
      // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
      this.changePageCoreRecordData()
    }
  }


}
</script>

<style lang="scss" scoped>
.studentInfo {
  padding: 20px;
  display: flex;
  .left-box {
    border-right: 1px solid #eee;
    width: 256px;
    flex-shrink: 0;
    .user-top {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #eee;
      .user-contact {
        color: #767676;
        font-size: 12px;
        margin-top: 16px;
      }
    }
    .user-content {
      padding: 20px;
      color: #767676;
      font-size: 12px;
      .user-content-item {
        margin-bottom: 12px;
      }
      .user-btn {
        text-align: center;
      }
    }
  }
  .right-box {
    flex-grow: 1;
    padding: 0 20px;
    .title-box {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
    }
  }
}
</style>
